<template>
    <div id="customer" style="width: 100%;height:550px;" />
</template>
  
<script>

import { getCustomer } from '@/api'

export default {
    name: "DailyProfitStat",

    mounted() {
        this.init()
    },

    methods: {
        init() {
            getCustomer
                .request()
                .then(({ data }) => {
                    const name = []
                    const total = []
                    data.data.forEach(i => {
                        name.push(i.name)
                        total.push(i.total)
                    })
                    this.setOptions({ name, total })
                })
        },

        setOptions({ name, total }) {
            let MyEcharts = this.$echarts.init(document.getElementById('customer'))
            MyEcharts.setOption({
                borderColor: 'red', // 标题边框颜色
                title: {
                    text: '顾客消费情况统计',
                    left: 'center',
                    align: 'right',
                    textStyle: {
                        color: '#00eeff',  // 图例文字的颜色
                    },
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#7edae8',  //坐标的字体颜色
                        },
                    },
                },
                yAxis: {
                    type: 'category',
                    data: name,
                    axisLabel: {
                        textStyle: {
                            color: '#7edae8',  //坐标的字体颜色
                        },
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c}' + "元"
                },
                series: [
                    {
                        data: total,
                        type: 'bar',
                        markPoint: {
                            data: [
                                {
                                    type: 'max', name: '最大值'
                                },
                                {
                                    type: 'min', name: '最小值'
                                }
                            ]
                        }
                    },

                ]
            })
        }
    }
}
</script>
  